import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
import { defineComponent, PropType, computed, VNode } from 'vue';
import { IDEList, ILayoutPanel } from '@ibiz/model-core';
import { isNil } from 'lodash-es';
import {
  IControlProvider,
  IMDControlGroupState,
  ListController,
} from '@ibiz-template/runtime';
import './list.scss';
import { usePagination } from '../../util';

export const ListControl = defineComponent({
  name: 'IBizListControl',
  props: {
    modelData: { type: Object as PropType<IDEList>, required: true },
    context: { type: Object as PropType<IContext>, required: true },
    params: { type: Object as PropType<IParams>, default: () => ({}) },
    provider: { type: Object as PropType<IControlProvider> },
    /**
     * 部件行数据默认激活模式
     * - 0 不激活
     * - 1 单击激活
     * - 2 双击激活(默认值)
     *
     * @type {(number | 0 | 1 | 2)}
     */
    mdctrlActiveMode: { type: Number, default: undefined },

    /**
     * 是否为单选
     * - true 单选
     * - false 多选
     *
     * @type {(Boolean)}
     */
    singleSelect: { type: Boolean, default: undefined },
    isSimple: { type: Boolean, required: false },
    loadDefault: { type: Boolean, default: true },
  },
  setup(props) {
    const c = useControlController((...args) => new ListController(...args));
    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);

    const { onPageChange, onPageRefresh, onPageSizeChange } = usePagination(c);

    // 是否可以加载更多
    const isLodeMoreDisabled = computed(() => {
      if (c.model.enablePagingBar === true) {
        return true;
      }
      return (
        c.state.items.length >= c.state.total ||
        c.state.isLoading ||
        c.state.total <= c.state.size
      );
    });

    // 绘制项布局面板
    const renderPanelItem = (item: IData, modelData: ILayoutPanel): VNode => {
      const { context, params } = c;
      // 是否选中数据
      const findIndex = c.state.selectedData.findIndex(data => {
        return data.srfkey === item.srfkey;
      });
      const itemClass = [ns.b('item'), ns.is('active', findIndex !== -1)];
      return (
        <iBizControlShell
          class={itemClass}
          data={item}
          modelData={modelData}
          context={context}
          params={params}
          onClick={(): Promise<void> => c.onRowClick(item)}
          onDblclick={(): Promise<void> => c.onDbRowClick(item)}
        ></iBizControlShell>
      );
    };

    // 绘制默认列表项
    const renderDefaultItem = (item: IData): VNode => {
      // 是否选中数据
      const findIndex = c.state.selectedData.findIndex(data => {
        return data.srfkey === item.srfkey;
      });
      const itemClass = [ns.b('item'), ns.is('active', findIndex !== -1)];
      return (
        <div
          class={itemClass}
          key={item.srfkey}
          onClick={(): Promise<void> => c.onRowClick(item)}
          onDblclick={(): Promise<void> => c.onDbRowClick(item)}
        >
          {`${isNil(item.srfmajortext) ? '' : item.srfmajortext}`}
        </div>
      );
    };

    // 绘制分组
    const renderGroup = (group: IMDControlGroupState): VNode => {
      const panel = props.modelData.itemLayoutPanel;
      return (
        <el-collapse-item
          title={group.caption}
          class={ns.be('group-content', 'item')}
        >
          {group.children.length > 0 ? (
            group.children.map(item => {
              return panel
                ? renderPanelItem(item, panel)
                : renderDefaultItem(item);
            })
          ) : (
            <div class={ns.bem('group-content', 'item', 'empty')}>无数据</div>
          )}
        </el-collapse-item>
      );
    };

    // 绘制卡片内容
    const renderListContent = (): VNode => {
      if (c.model.enableGroup && !c.state.isSimple) {
        return (
          <el-collapse class={[ns.b('group-content'), ns.b('content')]}>
            {c.state.groups?.map(group => {
              return (
                <div class={[ns.b('scroll-item')]}>{renderGroup(group)}</div>
              );
            })}
          </el-collapse>
        );
      }
      const panel = props.modelData.itemLayoutPanel;
      return (
        <div
          class={[ns.b('scroll'), ns.b('content')]}
          v-infinite-scroll={(): Promise<void> => c.loadMore()}
          infinite-scroll-distance={10}
          infinite-scroll-disabled={isLodeMoreDisabled.value}
        >
          {c.state.items.map((item: IData) => {
            return (
              <div class={[ns.b('scroll-item')]}>
                {panel ? renderPanelItem(item, panel) : renderDefaultItem(item)}
              </div>
            );
          })}
        </div>
      );
    };

    // 绘制项行为
    const renderQuickToolBar = (): VNode | undefined => {
      const ctrlModel = c.model.controls?.find(item => {
        return item.name === `${c.model.name!}_quicktoolbar`;
      });
      if (!ctrlModel) {
        return;
      }
      return (
        <iBizToolbarControl
          modelData={ctrlModel}
          context={c.context}
          params={c.params}
        ></iBizToolbarControl>
      );
    };

    const renderBatchToolBar = (): VNode | undefined => {
      const ctrlModel = c.model.controls?.find(item => {
        return item.name === `${c.model.name!}_batchtoolbar`;
      });
      if (!ctrlModel) {
        return;
      }
      return (
        <div class={ns.b('batchtoolbar')}>
          <iBizToolbarControl
            modelData={ctrlModel}
            context={c.context}
            params={c.params}
          ></iBizToolbarControl>
        </div>
      );
    };

    const renderNoData = (): VNode | undefined => {
      // 未加载不显示无数据
      const { isLoaded } = c.state;
      if (!isLoaded) {
        return;
      }
      return (
        isLoaded && (
          <iBizNoData
            class={ns.b('content')}
            text={c.model.emptyText}
            emptyTextLanguageRes={c.model.emptyTextLanguageRes}
          >
            {renderQuickToolBar()}
          </iBizNoData>
        )
      );
    };

    return {
      c,
      ns,
      renderListContent,
      renderNoData,
      renderBatchToolBar,
      onPageChange,
      onPageRefresh,
      onPageSizeChange,
    };
  },
  render() {
    const { enablePagingBar } = this.c.model;

    let content = null;
    if (this.c.state.isCreated) {
      content = [
        this.c.state.items.length > 0
          ? this.renderListContent()
          : this.renderNoData(),
        this.renderBatchToolBar(),
        enablePagingBar ? (
          <iBizPagination
            class={this.ns.e('pagination')}
            total={this.c.state.total}
            curPage={this.c.state.curPage}
            size={this.c.state.size}
            totalPages={this.c.state.totalPages}
            onChange={this.onPageChange}
            onPageSizeChange={this.onPageSizeChange}
            onPageRefresh={this.onPageRefresh}
          ></iBizPagination>
        ) : null,
      ];
    }

    return (
      <iBizControlBase
        class={[this.ns.is('enable-page', !!enablePagingBar)]}
        controller={this.c}
      >
        {content}
      </iBizControlBase>
    );
  },
});
